<template>
  <div class="smart-actions" v-if="smartSuggestions.length > 0">
    <el-card class="suggestions-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>智能建议</span>
          <el-button link type="primary" @click="applyAll">
            <el-icon><MagicStick /></el-icon>一键应用所有建议
          </el-button>
        </div>
      </template>
      
      <div class="suggestions-list">
        <div
          v-for="suggestion in smartSuggestions"
          :key="suggestion.id"
          class="suggestion-item"
        >
          <div class="suggestion-content">
            <el-tag :type="getSuggestionType(suggestion.type)" effect="dark">
              {{ getSuggestionTypeLabel(suggestion.type) }}
            </el-tag>
            <span class="description">{{ suggestion.description }}</span>
            <div class="suggestion-actions">
              <el-button
                size="small"
                type="primary"
                link
                @click="applySuggestion(suggestion)"
              >
                应用
              </el-button>
              <el-button
                size="small"
                type="danger"
                link
                @click="removeSuggestion(suggestion.id)"
              >
                忽略
              </el-button>
            </div>
          </div>
          
          <el-progress
            v-if="suggestion.confidence"
            :percentage="suggestion.confidence"
            :stroke-width="6"
            :show-text="false"
            class="confidence-bar"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { MagicStick } from '@element-plus/icons-vue'

interface SmartSuggestion {
  id: string
  type: string
  description: string
  records?: string[]
  confidence?: number
}

interface Props {
  smartSuggestions: SmartSuggestion[]
  getSuggestionType: (type: string) => string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'apply-suggestion', suggestion: SmartSuggestion): void
  (e: 'apply-all-suggestions'): void
  (e: 'remove-suggestion', suggestionId: string): void
}>()

const getSuggestionTypeLabel = (type: string) => {
  const labelMap: Record<string, string> = {
    followup: '跟进建议',
    priority: '优先级建议',
    duplicate: '重复建议',
    filter: '过滤建议'
  }
  return labelMap[type] || type
}

const applySuggestion = (suggestion: SmartSuggestion) => {
  emit('apply-suggestion', suggestion)
}

const applyAll = () => {
  emit('apply-all-suggestions')
}

const removeSuggestion = (suggestionId: string) => {
  emit('remove-suggestion', suggestionId)
}
</script>

<style scoped lang="scss">
.smart-actions {
  margin-bottom: 20px;
}

.suggestions-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.suggestions-list {
  .suggestion-item {
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .suggestion-content {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
      
      .description {
        flex: 1;
        font-size: 14px;
        color: #606266;
      }
      
      .suggestion-actions {
        display: flex;
        gap: 8px;
      }
    }
    
    .confidence-bar {
      margin-top: 8px;
    }
  }
}
</style>